import React, { PropTypes } from 'react'
import { Form, Input, InputNumber, Radio, Modal, Select } from 'antd'
const FormItem = Form.Item;

const formItemLayout = {
	labelCol: {
		span: 6
	},
	wrapperCol: {
		span: 14
	}
};

const modal = ({
	visible,
	type,
	item,
	onOk,
	onCancel,
	form: {
		getFieldDecorator,
		validateFields,
		getFieldsValue
	}
}) => {
	function handleOk() {

		validateFields((errors) => {
			if(errors) {
				return
			}
			const data = {
				...getFieldsValue(),
			};
				onOk(data)
			})
	}

	const modalOpts = {
		title: `编辑`,
		visible,
		onOk: handleOk,
		onCancel,
		wrapClassName: 'vertical-center-modal'
	};
	return(
	<Modal {...modalOpts}>
      <Form>      
        <FormItem label='商品编码' hasFeedback {...formItemLayout}>  
          {getFieldDecorator('code', {
            initialValue: item.sales_id,
          })(<Input disabled/>)}
        </FormItem>
        <FormItem label='商品名称' hasFeedback {...formItemLayout}>
          {getFieldDecorator('goods_name', {
            initialValue: item.name,
          })(<Input disabled/>)}
        </FormItem>
        <FormItem label='原商品数量' hasFeedback {...formItemLayout}>
          {getFieldDecorator('old_amount', {
            initialValue: item.amount,
          })(<Input disabled/>)}
        </FormItem>
        <FormItem label='修改商品数量' hasFeedback {...formItemLayout}>
          {getFieldDecorator('new_amount', {
            initialValue: item.new_amount,
            rules: [
              {
                required: true,
                message: '位数不能超过5位,且必须是整数',
                pattern: /^[0-9]{0,5}$/
              }
            ]
          })(<Input />)}
        </FormItem>
        <FormItem label='修改原因' hasFeedback {...formItemLayout}>
          {getFieldDecorator('reason', {
            initialValue: item.reason,
            rules: [
              {
                required: true,
                message: '修改原因未填写'
              }
            ]
          })(<Input />)}
        </FormItem>
      </Form>
    </Modal>
	)
};

modal.propTypes = {
	visible: PropTypes.any,
	form: PropTypes.object,
	item: PropTypes.object,
	onOk: PropTypes.func,
	onCancel: PropTypes.func
};

export default Form.create()(modal)